<template>
    <div class="FormView">
        <a-input v-model:value="username" placeholder="用户名(登录用)" @keyup.enter="Regist">
            <template #prefix>
                <user-outlined class="icon" type="user" />
                &nbsp;&nbsp;
            </template>
        </a-input>
        <br><br>
        <a-input v-model:value="nickname" placeholder="昵称(显示用)" @keyup.enter="Regist">
            <template #prefix>
                <user-outlined class="icon" type="user" />
                &nbsp;&nbsp;
            </template>
        </a-input>
        <br><br>
        <a-input-password v-model:value="password" placeholder="密码" @keyup.enter="Regist">
            <template #prefix>
                <lock-outlined class="icon" type="user" />
                &nbsp;&nbsp;
            </template>
        </a-input-password>
        <br><br>
        <a-input-password v-model:value="passwordAgain" placeholder="确认密码" @keyup.enter="Regist">
            <template #prefix>
                <lock-outlined class="icon" type="user" />
                &nbsp;&nbsp;
            </template>
        </a-input-password>
        <div class="OtherButton">
            <a-button type="link" @click="emit('login')">登录</a-button>
        </div>
        <a-button type="primary" :loading="loading" block @click="Regist">注册</a-button>
    </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
import { notification } from 'ant-design-vue'
import apis from '@/apis/user'
const username = ref<String>('');
const password = ref<String>('');
const passwordAgain = ref<String>('');
const nickname = ref<String>('');
const loading = ref<boolean>(false);

const emit = defineEmits(['login']);

function Regist() {
    if (!username.value) {
        notification.error({ message: '用户名不能为空' });
        return;
    };
    if (!nickname.value) {
        notification.error({ message: '用户名不能为空' });
        return;
    };
    if (!password.value) {
        notification.error({ message: '密码不能为空' });
        return;
    };
    if (!passwordAgain.value) {
        notification.error({ message: '密码不能为空' });
        return;
    };
    if (passwordAgain.value != password.value) {
        notification.error({ message: '两次输入密码不一致' });
        return;
    };
    loading.value = true;
    // permission
    apis.Regist({
        username: username.value,
        password: password.value,
        nickname: nickname.value,
        permission: 'user',
    }).then((res: any) => {
        notification.success({ message: '注册成功' });
        loading.value = false;
        emit('login');
    });
};


</script>
<style lang="less" scoped>
.OtherButton {
    padding: 10px 0;
    margin: 0 -16px;
}

.icon {
    color: rgba(255, 255, 255, 0.7);
}

:deep(.ant-input-affix-wrapper) {
    background-color: transparent !important;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0;
    padding: 4px;
    outline: none;
    box-shadow: none !important;

    &:hover {
        border-top: none !important;
        border-left: none !important;
        border-right: none !important;
        border-bottom: 1px solid #40a9ff8a;
    }
}

:deep(.ant-input) {
    background-color: transparent !important;
    border-radius: 0;
    padding: 4px;
    color: rgba(255, 255, 255, 0.7);

    &::placeholder {
        color: rgba(255, 255, 255, 0.3);
    }
}
</style>